<template>
  <div class="personal">
    <div class="header">
      <div class="img">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt
        />
        <img v-else src="../../assets/134.jpg" alt />
      </div>
      <div class="personinfo">
        <div class="name">
          <span
            class="iconfont"
            :class="{
              iconxingbienan: userInfo.gender == 1,
              iconxingbienv: userInfo.gender == 0,
            }"
          ></span>
          {{ userInfo.nickname }}
        </div>
        <div class="date">2020-9-19</div>
      </div>
      <div class="iconfont iconjiantou1" @click="$router.push('/edit')"></div>
    </div>
    <PersonalCell
      label="我的关注"
      desc="关注的用户"
      @click="$router.push('/follow')"
    />
    <PersonalCell
      label="我的跟贴"
      desc="跟帖/回复"
      @click="$router.push('/mycomment')"
    />
    <PersonalCell
      label="我的收藏"
      desc="文章/视频"
      @click="$router.push('/collect')"
    />
    <PersonalCell label="设置" @click="$router.push('/edit')" />
    <!-- <PersonalCell label="退出" @click="logOut" /> -->
    <van-button round type="info" class="van-button" @click="logOut" block
      >退出登录</van-button
    >
  </div>
</template>

<script>
import PersonalCell from "../../components/PersonalCell";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  // 页面创建成功, 可以拿到 token
  created() {
    console.log(localStorage.getItem("token"));
    console.log(localStorage.getItem("userId"));
    //发送请求获取数据
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    }).then((res) => {
      console.log(res);
      // 获取成功将用户数据存放到当前的 data 当中
      if (res.data.message == "获取成功") {
        this.userInfo = res.data.data;
      }
    });
  },
  components: {
    PersonalCell,
  },
  methods: {
    handelInfo(newInfo) {
      console.log(newInfo);
    },
    logOut() {
      // removeItem 清理单一属性
      // localStorage.removeItem(key)
      localStorage.clear();
      // 跳转页面
      // this.$router.push('/login')点击浏览器返回的话 又会回到个人中心页不合理  replace则不会
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.personal {
  background-color: papayawhip;
  height: 100%;
  .header {
    display: flex;
    padding: 20/360 * 100vw;
    border-bottom: 4px solid #e4e4e4;
    img {
      border-radius: 50%;
      width: 100/360 * 100vw;
      height: 100/360 * 100vw;
      //解决img图片变形问题
      object-fit: cover;
    }
    .personinfo {
      flex: 1;
      padding: 15/360 * 100vw;
      .name {
        color: #333333;
        font-size: 16/360 * 100vw;
        .iconxingbienan {
          color: #1d82fe;
          font-size: 20/360 * 100vw;
          margin-right: 5px;
        }
        .iconxingbienv {
          color: #f43dbf;
          font-size: 20/360 * 100vw;
          margin-right: 5px;
        }
      }
      .date {
        margin-top: 15/360 * 100vw;
        margin-left: 15/360 * 100vw;
        color: #aea7a1;
      }
    }
    .iconjiantou1 {
      font-size: 30/360 * 100vw;
      margin-top: 30/360 * 100vw;
      color: #aea7a1;
    }
  }
  .van-button {
    background-color: red;
    width: 300/360 * 100vw;
    margin: 80/360 * 100vw auto;
    border: none;
  }
}
</style>